<template>
  <div style="width: 100vw; height: 100vh; display: flex; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    
    <!-- 整体容器 -->
    <div style="width: 1200px; height: 600px; margin: auto; display: flex; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
      
      <!-- 左侧轮播图 - 50% -->
      <div style="flex: 1; position: relative; background: #f0f0f0;">
        <el-carousel 
          :interval="4000" 
          arrow="always" 
          height="600px"
          indicator-position="outside">
          
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; color: white;"
                 :style="{ backgroundColor: item.color }">
              {{ item.text }}
            </div>
          </el-carousel-item>
          
        </el-carousel>
      </div>
      
      <!-- 右侧登录表单 - 50% -->
      <div style="flex: 0 0 480px; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center;">
        <h1 style="text-align: center; color: #333; margin-bottom: 40px;">欢迎登录</h1>
        
        <el-input 
          v-model="username" 
          placeholder="用户名"
          style="margin-bottom: 20px;">
        </el-input>
        
        <el-input 
          v-model="password" 
          type="password"
          placeholder="密码"
          style="margin-bottom: 20px;">
        </el-input>
        
        <el-button 
          type="primary" 
          size="large"
          style="width: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;"
          @click="goBack">
          返回完整登录页
        </el-button>
        
        <p style="text-align: center; margin-top: 20px; color: #999; font-size: 14px;">
          这是简化版登录页<br>
          如果能看到左侧彩色方块，说明布局正常
        </p>
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'LoginSimple',
  data() {
    return {
      username: '',
      password: '',
      images: [
        { text: '图片 1', color: '#667eea' },
        { text: '图片 2', color: '#764ba2' },
        { text: '图片 3', color: '#f093fb' },
        { text: '图片 4', color: '#4facfe' }
      ]
    }
  },
  methods: {
    goBack() {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
/* 轮播图箭头样式 */
.el-carousel >>> .el-carousel__arrow {
  background-color: rgba(0, 0, 0, 0.5);
  width: 50px;
  height: 50px;
  font-size: 20px;
}

.el-carousel >>> .el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 指示器样式 */
.el-carousel >>> .el-carousel__indicators {
  bottom: 20px;
}

.el-carousel >>> .el-carousel__indicator.is-active button {
  background-color: #667eea;
}
</style>



